<div class="f-header">
	<div class="f-header-box clearfix">
		<a href="${s.base}"  class="logo" title="在线网校学习平台"></a>
		<nav class="header-nav">
			<a href="${s.base}" class="header-nav-item">首 页</a>
			<a href="${s.base}/course/list.html" class="header-nav-item">课 程</a>
			<a href="${s.base}/user/home.html" class="header-nav-item">我的</a>
			<a href="http://opt.ioswift.org" target="_blank" class="header-nav-item" style="width:100px;">运营CMS</a>
			<a href="http://m.ioswift.org" target="_blank" class="header-nav-item" style="width:100px;">M站</a>
		</nav>
		
		<nav class="header-nav" style="float:right">
			<@shiro.guest>
			<a href="#myModal" class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">登录</a>
			<a href="#myModal" class="header-nav-item" data-toggle="modal" onclick="registe();"  style="margin-left:0px;font-size:14px;">注册</a>
			</@shiro.guest>
			
			<@shiro.user>
			<a href="${s.base}/user/home.html" class="header-nav-item"  style="margin-left:0px;width:40px;height:40px;" id="userdetail">
	        	<img id="headerUserHeader" alt="" src='<@shiro.principal property="header"/>' style="width: 35px;height: 35px;border-radius:50%;">
	        </a>
	       </@shiro.user>
		</nav>
		
		<@shiro.user>
		<!-- 登录之后显示用户的基本信息-start -->
		<div id="userdetailHtml" style="display: none;">
			<div style="padding:10px;">
				<div style="margin-top:10px;">
					<span style="font-size: 16px;">用户名：<@shiro.principal property="username"/></span>
				</div>
				
				<div style="margin-top:20px;">
					<a id="curCourseA" class="link-a" target="_blank" href="">
					<div id="curCourseSpan" class="ellipsis" style="font-size: 16px;width:220px;height:30px;overflow:hidden;font-weight:bold;" title="" ></div>
					</a>
				</div>
				<div style="margin-top:5px;" >
					<a id="curCourseSectionA"  class="link-a" target="_blank" href="">
					<div id="curCourseSectionSpan" class="ellipsis"  style="font-size: 14px;width:220px;height:30px;overflow:hidden;" title=""></div>
					</a>
				</div>
				
				<div style="margin-top:20px;border-top:1px solid #eee;width:200px;padding-top:10px;">
					<a class="link-a" href="${s.base}/auth/logout.html">
					<span>退出</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 登录之后显示用户的基本信息-end -->
		</@shiro.user>
	</div>
</div>

<@shiro.guest>
<!-- 用户登录注册modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  style="position:fixed; top:30%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size:18px;">×</span>
                </button>
                <h4 class="modal-title"  id="loginTitle"  style="float: left; color: #337Ab7;cursor: pointer; " onclick="login();">登 录</h4>
                <h4 class="modal-title"  id="registeTitle"  style="float: left;margin-left: 20px;cursor: pointer;" onclick="registe();">注 册</h4>
                <div class="clearfix"></div>
            </div>
            
            <div class="modal-body">
               	<form id="loginForm" class="form-horizontal" style="padding: 0px 20px;" method="POST" action="${s.base}/auth/ajaxlogin.html">
                      <div class="form-group">
                          <input id="usernameHeader1"  type="text" class="form-control"  name="username" placeholder="用户名">
                      </div>
                      <div class="form-group help">
                          <input id="passwordHeader1"  type="password" class="form-control"  name="password"  placeholder="密　码">
                      </div>
                      <div class="form-group">
						<input id="identiryCodeHeader1" class="form-control"  name="identiryCode" maxlength="6" class="input-text" type="text" style="width: 120px;float:left;" placeholder="请输入验证码"/>
						<img  id="indeityImgHead1"  onclick="reloadIndityImg('indeityImgHead1');" src="${s.base}/tools/identiry/code.html" style="width:80px;height:33px;float:left;margin-left:10px;float:left;border-radius:5px;"/>
					  	<span id="loginError" style="margin-left:10px;height:33px;line-height:33px;color:red;display:none;">错误信息</span>
					  </div>
                      <div class="form-group">
                          <label>
                           <input type="checkbox" value="1" id="checkbox1" name="rememberMe">
                           <span class="text" style="color: #787D82;font-size: 14px;">下次自动登录</span>
                          </label>
                      </div>
                      <a href="javascript:void(0)">
                      	<div onclick="doAjaxLogin();" class="header-login-btn">登 录</div>
                      </a>
                  </form>
                  
                   <form id="registeForm" method="POST" action="${s.base}/auth/doRegister.html"  class="form-horizontal" style="padding: 0px 20px;display: none;">
                       <div class="form-group">
                           <input id="usernameHeader2"  name="username" type="text" class="form-control"   placeholder="用户名">
                       </div>
                       <div class="form-group help">
                           <input id="passwordHeader2"  name="password"  type="password" class="form-control"  placeholder="密　码">
                       </div>
                       <div class="form-group">
							<input id="identiryCodeHeader2" class="form-control"  name="identiryCode" maxlength="6" class="input-text" type="text" style="width: 120px;float:left;" placeholder="请输入验证码"/>
							<img  onclick="reloadIndityImg('indeityImgHead2');" id="indeityImgHead2"  src="${s.base}/tools/identiry/code.html" style="width:80px;height:33px;float:left;margin-left:10px;float:left;border-radius:5px;"/>
					  		<span id="registerError" style="margin-left:10px;height:33px;line-height:33px;color:red;display:none;">错误信息</span>
					  </div>
                       <a href="javascript:void(0)">
                      	<div class="header-login-btn" onclick="doAjaxRegister()">注 册</div>
                       </a>
                   </form>
            </div>
        </div>
    </div>
</div>
</@shiro.guest>

<script type="text/javascript">
	$(function(){
		var headPhoto = $('#headerUserHeader').attr('src');
		if(headPhoto == null || headPhoto == '' || headPhoto == 'null'){
			var headPhoto = "${s.base}/res/i/header.jpg";
			$('#headerUserHeader').attr('src',headPhoto);
		}
		//一级菜单&二级菜单 
		$(".category").popover({
            trigger:'manual',
            placement : 'right',
            html: 'true',
            content : '',
            animation: false
        }).on("mouseenter", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).show();
            $('#' + cid).hover(function(){
            	$('#' + cid).show();
            },function(){
            	$('#' + cid).hide();
			});
        }).on("mouseleave", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).hide();
        });
		
		if(SHIRO_LOGIN){
			//获取当前用户学习进度
			$.ajax({
				url:CONTEXT_PATH + '/course/getCurLeanInfo.html',
			    type:'POST',
			    dataType:'json',
			    success:function(resp){
			    	if(resp.errcode == 0 && resp.data){
		    			var learnUrl = CONTEXT_PATH+"/course/learn/"+resp.data.curCourse.id+".html";
			    		var learnTitle = resp.data.curCourse.name;
			    		$('#curCourseA').attr('href',learnUrl)
			    		$('#curCourseSpan').attr('title',learnTitle).html(learnTitle);
			    		
			    		var videoUrl = CONTEXT_PATH+"/course/video/"+resp.data.curCourseSection.id+".html";
			    		var videoTitle = resp.data.curCourseSection.name;
			    		$('#curCourseSectionA').attr('href',videoUrl)
			    		$('#curCourseSectionSpan').attr('title',videoTitle).html(videoTitle);
			    	}
			    } 
			});
			
			$("#userdetail").popover({
	            trigger:'manual',
	            placement : 'bottom',
	            html: true,
	            content : '<div id="userdetailContent" style="width:300px;height:200px;"></div>',
	            animation: false
	        }).on("mouseenter", function () {
	            var _this = this;
	            $(this).popover("show");
	            var userdetailHtml = $('#userdetailHtml').html();
	            $('#userdetailContent').html(userdetailHtml);
	            $(this).siblings(".popover").on("mouseleave", function () {
	                $(_this).popover('hide');
	            });
	        }).on("mouseleave", function () {
	            var _this = this;
	            setTimeout(function () {
	                if (!$(".popover:hover").length) {
	                    $(_this).popover("hide")
	                }
	            }, 500);
	        });
		}
	});
	
	<@shiro.guest>
	//登录注册实现 
	function login(){
		$('#loginTitle').css('color','#337Ab7');
		$('#loginForm').show();
		$('#registeTitle').css('color','#000');
		$('#registeForm').hide();
	}
	function registe(){
		$('#loginTitle').css('color','#000');
		$('#loginForm').hide();
		$('#registeTitle').css('color','#337Ab7');
		$('#registeForm').show();
	}
	
	function reloadIndityImg(eleId){
		document.getElementById(eleId).src = CONTEXT_PATH + "/tools/identiry/code.html?ticket=" + Math.random();
	}
	
	function doAjaxLogin(){
		var username = $('#usernameHeader1').val();
		var password = $('#passwordHeader1').val();
		
		//验证用户名 
		if(!oc.enNumValid(username)){
			$('#loginError').show();
			$('#loginError').html("用户名只能为英文或数字");
			return;
		}
		
		//验证密码
		if(oc.isEmpty(password) || password.length < 6){
			$('#loginError').show();
			$('#loginError').html("密码至少6位");
			return;
		}
		
		//验证码不能为空
		var code = $('#identiryCodeHeader1').val();
		if(oc.isEmpty(code)){
			$('#loginError').show();
			$('#loginError').html("请输入验证码");
			return;
		}
		
		//登录
		$('#loginForm').ajaxSubmit({
			datatype : 'json',
			success : function(respText) {
				var resp = $.parseJSON(respText);
				if (resp.errcode == 0) {
					window.location.reload();
				} else if(resp.errcode == 1) {
					$('#loginError').show();
					$('#loginError').html("用户名密码错");
				}else if(resp.errcode == 2){
					$('#loginError').show();
					$('#loginError').html("验证码输入错误！");
					reloadIndityImg('indeityImgHead1');
				}
			},
			error : function(xhr) {
			}
		});
	}
	
	//ajax注册
	function doAjaxRegister(){
		var username = $('#usernameHeader2').val();
		var password = $('#passwordHeader2').val();
		
		//验证用户名 
		if(!oc.enNumValid(username)){
			$('#registerError').show();
			$('#registerError').html("用户名只能为英文或数字");
			return;
		}
		
		//验证密码
		if(oc.isEmpty(password) || password.length < 6){
			$('#registerError').show();
			$('#registerError').html("密码至少6位");
			return;
		}
		
		//验证码不能为空
		var code = $('#identiryCodeHeader2').val();
		if(oc.isEmpty(code)){
			$('#registerError').show();
			$('#registerError').html("请输入验证码");
			return;
		}
		
		//注册
		$('#registeForm').ajaxSubmit({
			datatype : 'json',
			success : function(respText) {
				var resp = $.parseJSON(respText);
				if (resp.errcode == 0) {
					window.location.href="${s.base}/auth/login.html";
				} else if(resp.errcode == 1) {
					$('#registerError').show();
					$('#registerError').html("用户名已被注册，请更换！");
				}else if(resp.errcode == 2){
					alert(1);
					$('#registerError').show();
					$('#registerError').html("验证码输入错误！");
					reloadIndityImg('indeityImgHeader2');
				}
			},
			error : function(xhr) {
			}
		});
	}
	</@shiro.guest>
</script>




